<template>
	<view>
		<view class="index_bg">
			<view class="user_name flex_dq" v-if="tokens">
				<view class="avatar">
					<image :src="userinfo.head_img" mode="aspectFill"></image>
				</view>
				<view class="user_box  flex_Z">
					<text class="c0 f28">{{userinfo.nickname}}</text>
					<view class="user_number flex_dq">
						<view class="bianhao flex_dq">
							<text>用户编号:</text>
							<text>{{userinfo.eth_address}}</text>
						</view>
						<image src="../../static/icon/i_copy.png" @click="isCopy(userinfo.eth_address)" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="brand_island_a">
			<swiper class="swiper_a" keyName="image_path" circular interval="3000" duration="500" previous-margin="10px"
				next-margin="20px">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper_box_a flex_c" @click="changeUrl(item.url)">
						<image :src="item.image_path" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 轮播 -->
		<!-- 		<view class="swipers">
			<u-swiper :list="bannerList" keyName="image_path" height="165" previousMargin="20" nextMargin="20" circular
				:autoplay="false" radius="10" bgColor="transparent" @click="changeUrl"></u-swiper>
		</view> -->
		<view class="noticeBar" data-url="/pagesMy/setting/notice" @click="allJump">
			<u-notice-bar :text="notice" mode="link" bgColor="#29294C" fontSize="12" color="#b29fbf"></u-notice-bar>
			<!-- <text class="more">更多</text> -->
		</view>
		<!-- NFT 模块 -->
		<view class="modele flex_spa_a">
			<view class="modele_box flex_ZC" @click="goNFT">
				<image src="../../static/icon/i_NFT.png" mode=""></image>
				<text>NFT</text>
			</view>
			<view class="modele_box flex_ZC" @click="gozysc">
				<image src="../../static/icon/i_zysc.png" mode=""></image>
				<text>自由市场</text>
			</view>
			<view class="modele_box flex_ZC" @click="goDAO">
				<image src="../../static/icon/i_Dao.png" mode=""></image>
				<text>DAO学堂</text>
			</view>
			<view class="modele_box flex_ZC" data-url="/pagesMy/fightingCenter/userRanking" @click="allJump">
				<image src="../../static/icon/i_phb.png" mode=""></image>
				<text>排行榜</text>
			</view>
			<!-- <view class="modele_box flex_ZC" data-url="/pagesMy/secretRealm/secretRealmIndex" @click="allJump">
				<image src="../../static/icon/i_mjzl.png" mode=""></image>
				<text>秘境之旅</text>
			</view> -->
		</view>
		<!-- 品牌岛 -->
		<view class="brand flex_Z" v-if="brandList.length != 0">
			<view class="brand_tit flex_ld">
				<text>品牌岛</text>
				<view class="brand_tit_r flex_dq" data-url="/pagesMy/brandCenter/brandIsland" @click="allJump">
					<text class="f28 c4">更多</text>
					<image src="../../static/icon/i_y.png" mode=""></image>
				</view>
			</view>
			<!-- autoplay -->
			<view class="brand_island">
				<swiper class="swiper" circular previous-margin="60px" next-margin="60px" interval="3000"
					duration="500">
					<swiper-item class="flex_c" v-for="(item,index) in brandList" :key="index"
						@click="goBrandDetails(item.id)">
						<view class="swiper_box flex_c">
							<image :src="item.thumb" mode="aspectFill"></image>
						</view>
						<view class="introduce flex_Z">
							<view class="introduce_t flex_dq">
								<image :src="item.logo" mode="aspectFill"></image>
								<view class="short_box flex_Z">
									<text class="f28">{{item.name}}</text>
									<text class="short">{{item.brand_abbr}}</text>
								</view>
							</view>

							<view class="jian flex_dq">
								<text>{{item.brand_info}}</text>
							</view>
						</view>

					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- NFT藏品 -->
		<view class="collection flex_Z">
			<text>NFT藏品</text>
			<view class="collection_nav flex_ld">
				<view class="nav_box flex_dq">
					<text :class="inx == 1 ?'active':''" @click="isToggle(1)">平台首发</text>
					<text :class="inx == 2 ?'active':''" @click="isToggle(2)">品牌首发</text>
				</view>
				<!-- 				<view class="mores flex_dq" @click="goPageNext">
					<text>更多</text>
					<image src="../../static/icon/i_y.png" mode=""></image>
				</view> -->
			</view>
			<view v-if="inx == 1">
				<view class="NFT flex_ZC" v-for="(item,index) in NFTList" :key="index" @click="goDetails(item.id)">
					<image :src="item.goods_image" mode="aspectFill"></image>
					<text v-if="item.status != 1">{{item.status_desc}}</text>
					<text v-else> {{item.status_desc}} {{(item.start_time)}}</text>
					<view class="NFT_btm flex_dq">
						<view class="NFT_btm_l flex_dq">
							<image :src="item.shop_brand.logo" mode=""></image>
							<text>{{item.shop_brand.name}} </text>
						</view>

					</view>
					<view class="NFT_name flex_ld">
						<text>{{item.goods_name}}</text>
					</view>
					<view class="NFT_name flex_ld">
						<view class="NFT_btm_r flex_dq">
							<view class="sign flex_dq">
								<view class="sign_l flex_c">
									<text>系列</text>
								</view>
								<text>{{item.goods_series.content}}</text>
							</view>
							<view class="sign flex_dq">
								<view class="sign_l flex_c">
									<text>限量</text>
								</view>
								<text>{{item.circulation == 0 ?'不限量':item.circulation + '份'}}</text>
							</view>
						</view>
						<view class="money flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.price}}</text>
						</view>
					</view>
				</view>
				<noDatas :xxxList="NFTList" :status="status"></noDatas>
			</view>
			<view v-else>
				<view class="NFT flex_ZC" v-for="(item,index) in productList" :key="index" @click="goDetails2(item.id)">
					<image :src="item.goods_image" mode="aspectFill"></image>
					<text v-if="item.status != 1">{{item.status_desc}}</text>
					<text v-else> {{item.status_desc}} {{(item.start_time)}}</text>
					<view class="NFT_btm flex_dq">
						<view class="NFT_btm_l flex_dq">
							<image :src="item.shop_brand.logo" mode=""></image>
							<text>{{item.shop_brand.name}} </text>
						</view>

					</view>
					<view class="NFT_name flex_ld">
						<text>{{item.goods_name}}</text>
					</view>
					<view class="NFT_name flex_ld">
						<view class="NFT_btm_r flex_dq">
							<view class="sign flex_dq">
								<view class="sign_l flex_c">
									<text>系列</text>
								</view>
								<text>{{item.goods_series.content}}</text>
							</view>
							<view class="sign flex_dq">
								<view class="sign_l flex_c">
									<text>限量</text>
								</view>
								<text>{{item.goods.circulation == 0 ?'不限量':item.goods.circulation + '份'}}</text>
							</view>
						</view>
						<view class="money flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.price}}</text>
						</view>
					</view>
				</view>
				<noDatas :xxxList="productList" :status="status"></noDatas>
			</view>
		</view>
		<!-- <view class="masks"></view> -->
		<!-- 筛选类型 -->
		<view>
			<u-popup :show="showScreen" @close="showScreen = false" bgColor="transparent" closeable>
				<view class="popup_type ">
					<text>类型</text>
					<view class="xuan flex_left">
						<text :class="item.id == ids? 'actives':''" v-for="(item,index) in typeList" :key="index"
							@click="isType(item.id)">{{item.name}}</text>
					</view>
					<text class="submit" @click="isConfirm">确定</text>
				</view>
			</u-popup>
		</view>
		<view v-if="!closePop && tokens">
			<view v-if="!realName " class="authentication flex_ld" data-url="/pagesMy/setting/realNameAuthentication"
				@click="allJump">
				<text>实名认证后才能可以购买艺术作品</text>
				<view class="tishi flex_dq">
					<text>去认证</text>
					<image src="../../static/icon/i_clone.png" mode="" @click.stop="closePop = true"></image>
				</view>
			</view>
		</view>
		<!-- NFT藏品 -->
		<view class="empty2"></view>
	</view>
</template>
<script>
	import {baseURL} from "@/utils/request.js"
	import {fhIndex,getuserinfo,realStatus,download} from "../../api/index.js";
	import {goodsList,hatchGoods,brandAll} from "../../api/store.js";
	import {messagesindex} from "../../api/setting.js"
	import appUpdate from '@/uni_modules/leruge-app-update/js_sdk/leruge-app-update.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				userinfo: {}, //用户信息
				inx: 1, //类型切换
				ids: '', //类型
				indexc: 0,
				isSwitch: false, //下拉弹窗
				showScreen: false, //筛选弹窗
				closePop: false, //关闭实名弹窗
				jixing:false,
				tokens:'', //token
				values: '最新上架',
				application: '', //apk包
				notice: '', //公告/通知
				realName: 0, //是否实名
				platform: '', //操作系统
				versionNumber: '', //应用版本
				examine:0,
				typeList: [], //品牌方
				bannerList: [], //轮播图
				brandList: [], //品牌岛
				NFTList: [], //NFT藏品
				productList: [], //自由市场
				updateInfo: {}, //版本信息
				choiceType: 'create_time desc', //筛选方式 
				downList: [{
						id: 1,
						name: '最新上架',
						type: 'create_time desc'
					},
					{
						id: 2,
						name: '价格升序',
						type: 'price asc'
					},
					{
						id: 3,
						name: '价格降序',
						type: 'price desc'
					},
				],
			}
		},
		onShow() {
			this.initIndex()
			this.initList()
			let tokens = uni.getStorageSync('token');
			this.tokens = tokens;
			// console.log(tokens); 
			if (tokens) {
				this.getuser()
				this.getoverallNews()
				this.queryReal()
				// #ifdef APP
				const systemInfo = uni.getSystemInfoSync();
				this.platform = systemInfo.platform;
				this.versionNumber = systemInfo.appWgtVersion;
				// this.isDownload()
				// #endif
				this.isDownload()
			}
			this.isSwitch = false
		},
		methods: {
			gozysc(){
				// uni.setStorageSync("typess",2)
				uni.switchTab({
					url:"/pages/index/incubationHall"
				})
			},
			// 版本信息
			isDownload() {
				download().then(res => {
					console.log(res)
					if (res.code == 1) {
						console.log(Number(res.data.is_update));
						this.updateInfo.platform = this.platform, //系统型号
						this.updateInfo.mainColor = 'FF2CDF', //按钮颜色
						this.updateInfo.version = res.data.version //版本号
						this.updateInfo.force = Number(res.data.is_update) //强制更新
						this.updateInfo.downUrl = res.data.download //下载地址
						this.updateInfo.updateContent = res.data.update_content //更新内容信息
						this.examine = Number(res.data.ios_is_examine)
						// 判断市场常见的几种刘海屏机型
						let that = this;
						uni.getSystemInfo({
							success: function(res) {
								console.log(res);
								let modelmes = res.osName;
								console.log("手机型号-------", res.osName);
								if(modelmes == 'ios'){
									if(that.examine == 1){
										uni.setStorageSync('fictitiousState',true)
									}else{
										uni.setStorageSync('fictitiousState',false)
									}
								}else{
									uni.setStorageSync('fictitiousState',false)
								}
								console.log('控制----', uni.getStorageSync('fictitiousState'));
							}
						});
						// #ifdef APP
						if(that.examine == 0){
							this.compareVersion(this.updateInfo.version, this.versionNumber)
						}
						// #endif
					}
				})
			},
			// 比较版本号
			compareVersion(version1, version2) {
					console.log('线上版本', version1);
					console.log('当前版本', version2);
					const num1 = parseInt(version1.replace(/\./g, ''));
				    const num2 = parseInt(version2.replace(/\./g, ''));
				    if (num1 < num2) {
						console.log("1小于2",num1,num2)
				        return `${version1} 小于 ${version2}`;
						
				    } else if (num1 > num2) {
						console.log("1大于2",num1,num2)
						appUpdate(this.updateInfo) // 更新
				        return `${version1} 大于 ${version2}`;
				    } else {
				        return `${version1} 等于 ${version2}`;
				    }
				
				
				// const arr1 = v1.split('.')
				// const arr2 = v2.split('.')
				// if (arr1.length === arr2.length) {
				// 	for (let i = 0; i < arr1.length; i++) {
				// 		let ver1 = parseInt(arr1[i] || '0')
				// 		let ver2 = parseInt(arr2[i] || '0')
				// 		if (ver1 > ver2) {
				// 			console.log("线上版本大于当前版本")
				// 			appUpdate(this.updateInfo) // 更新
				// 		}
				// 	}
				// }
			},
			// 新消息角标
			getoverallNews() {
				messagesindex().then(res => {
					// console.log(res);
					if (res.code == 1) {
						if (Number(res.data.message_number) > 0) {
							uni.setTabBarBadge({
								index: 2,
								text: res.data.message_number
							})
						} else {
							uni.hideTabBarRedDot({
								index: 2,
							})
						}
					}
				})
			},
			// 初始化藏品列表
			initList() {
				let data = {
					page: this.page,
				};
				goodsList(data).then(res => {
					console.log('品牌方', res);
					if (res.code == 1) {
						let list = res.data.data;
						this.NFTList = this.page == 1 ? list : this.NFTList.concat(list);
						// console.log(this.NFTList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}


				})
			},
			// 初始化平台首发列表
			platformList() {
				let data = {
					page: this.page,
				};
				hatchGoods(data).then(res => {
					if (res.code == 1) {
						let list = res.data.data;
						this.productList = this.page == 1 ? list : this.productList.concat(list);
						console.log(this.productList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 轮播、列表 集成接口
			initIndex() {
				fhIndex().then(res => {
					console.log('轮播',"color:#6ad1c7",res)
					this.bannerList = res.data.banner_list
					this.brandList = res.data.brand_list
					if (res.data.article_list) {
						this.notice = res.data.article_list[0].small_text
					}
				})
			},
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.userinfo = res.data
						let userDetail = {
							phone: res.data.phone_format,
							account: res.data.account,
							avatar: res.data.head_img,
						};
						uni.setStorageSync('isPay', res.data.is_pay)
						uni.setStorageSync('userDetail', userDetail)
						if (!res.data.phone) {
							uni.reLaunch({
								url: '/pages/login/bindPhone?noPhpne=' + false
							})
						}
					}
				})
			},

			// 是否实名
			queryReal() {
				realStatus().then(res => {
					// console.log(res)
					this.realName = res.data.is_real
					uni.setStorageSync('realName', res.data.is_real)
				})
			},

			// 下拉选择
			isSelect(e) {
				this.values = e.name
				this.choiceType = e.type
				this.isSwitch = false
				this.platformList()
			},
			// 切换
			isToggle(index) {
				this.page = 1,
					this.isSwitch = false
				this.inx = index
				if (this.inx == 1) {
					this.NFTList = []
					this.initList()
				} else {
					this.productList = []
					this.platformList()
				}
			},
			isConfirm() {
				this.showScreen = false
				this.platformList()
			},
			// 选下拉类型
			isType(id) {
				console.log(id);
				this.ids = id
			},
			allJump(e) {
				let {
					url
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			// 去品牌主页
			goBrandDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/brandCenter/brandHomepage?id=' + id
				})
			},
			// 向下滚动
			goNFT() {
				uni.pageScrollTo({
					scrollTop: 850,
					duration: 200
				});
			},
			// 跳转页面
			changeUrl(url) {
				console.log(url);
				// 截取路径
				var domain = url.indexOf('fulezhenxuan');
				if (domain != -1) {
					var path = url.split('#');
					console.log('1111', path[1])
					// console.log('2222',path[1].split("?")[0]);
					// console.log('3333',path[1].split("?")[1]);
					let urls = path[1]
					uni.navigateTo({
						url: urls
					})
				}
			},
			// 复制
			isCopy(id) {
				uni.setClipboardData({
					data: id,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			goDAO() {
				uni.navigateTo({
					url: '/pages/index/DAO'
				})
			},
			// 截取时间
			turnTimes(e) {
				let aa = e.slice(5);
				return aa;
			},
			// NFT藏品跳转
			goPageNext() {
				if (this.inx == 1) {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/collectionList'
					})
				} else {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/brandFreeMarket'
					})
				}
			},
			// 商品详情
			goDetails(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pagesMy/mallCenter/productDetails?id=' + id
				})
			},
			// 商品详情
			goDetails2(id) {
				uni.navigateTo({
					url: '/pagesMy/mallCenter/brandDetails?id=' + id
				})
			},

			//隐藏手机号
			// phoneNumShow(phone) {
			// 	// console.log('手机号',phone);
			// 	let mphone = phone.substring(0, 3) + '****' + phone.substring(7);
			// 	return mphone;
			// },
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.inx == 1) {
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.initList()
				}
			} else {
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.platformList()
				}
			}

		}
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.index_bg {
		display: flex;
		align-items: center;
		width: 100%;
		height: 300rpx;
		background: url(../../static/image/bg3.png);
		background-size: 100% 100%;
	}

	.user_name {}

	.avatar {
		width: 76rpx;
		height: 76rpx;
		margin: 0 24rpx 0 32rpx;
	}

	.avatar>image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.user_box {}

	.user_number {
		overflow: hidden;
		color: #A7A4AD;
		font-size: 20rpx;
	}

	.bianhao>text:nth-child(2) {
		width: 300rpx;
		overflow: hidden;
	}

	.user_number>image {
		width: 26rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}

	.swipers {
		width: 750rpx;
		height: 310rpx;
		transform: translateY(-70rpx);
	}

	.noticeBar {
		position: relative;
		width: 100%;
		height: 100rpx;
		transform: translateY(-20rpx);
		/* background: pink; */
	}

	/*  #ifdef  APP-ANDROID || APP-IOS */
	.more {
		position: absolute;
		top: 8rpx;
		right: 46rpx;
		font-size: 24rpx;
		color: #FF2CDF;
		background: #29294C;
		padding: 0rpx 10rpx 0rpx 20rpx;
	}

	/*  #endif  */
	/*  #ifdef  H5 ||WEB  */
	.more {
		position: absolute;
		top: 10rpx;
		right: 60rpx;
		font-size: 24rpx;
		color: #FF2CDF;
		background: #29294C;
		padding: 10rpx 10rpx 10rpx 20rpx;
	}

	/*  #endif  */


	.modele {
		width: 100%;
		/* background: pink; */
	}

	.modele_box {
		font-size: 30rpx;
		color: #A7A4AD;
	}

	.modele_box>image {
		width: 110rpx;
		height: 110rpx;
	}

	.brand {
		width: 100%;

	}

	.brand_tit {
		width: 100%;
		margin-top: 60rpx;
		padding: 0 20rpx;
	}

	.brand_tit>text:nth-child(1) {
		font-family: iconfont2;
		font-size: 44rpx;
		color: #ffffff;
	}

	.brand_tit_r {
		font-size: 28rpx;
		color: #ffffff60;
	}

	.brand_tit_r>image {
		width: 32rpx;
		height: 34rpx;
		margin-right: 2rpx;
	}



	.brand_island {
		width: 100%;
		height: 730rpx;
		margin-top: 30rpx;
	}

	.swiper {
		width: 100%;
		height: 730rpx;
	}

	.swiper_box {
		width: 448rpx;
		height: 700rpx;
		line-height: 700rpx;
		text-align: center;
		background: #00000025;
		border-radius: 100rpx;
	}

	.swiper_box>image {
		width: 400rpx;
		height: 650rpx;
		border-radius: 86rpx;
	}


	.introduce {
		display: flex;
		flex-direction: column;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 200rpx;
		z-index: 8;
		border-radius: 0 0 80rpx 80rpx;
		background: url(../../static/image/mbl.png);
		background-size: 100% 100%;
		opacity: 1;
		backdrop-filter: blur(10px);
	}

	.introduce_t {
		position: relative;
		color: #ffffff;
		margin: 10rpx 0;
	}

	.introduce_t>image {
		width: 83rpx;
		height: 83rpx;
		border-radius: 50%;
		margin: 0 20rpx;
	}

	.short_box {
		/* margin-left: 10rpx; */
		/* margin-top: -46rpx; */
	}

	.short_d {
		position: relative;
	}

	.short {
		/* position: absolute;
		bottom: -6rpx;
		left: 120rpx; */
		max-width: 240rpx;
		font-size: 18rpx;
		color: #333333;
		background: #F0DDE8;
		padding: 4rpx 10rpx;
		border-radius: 8rpx;
		text-align: center;
		white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
	}

	.jian {
		width: 100%;
		padding: 14rpx 24rpx 0;
		border-top: 1rpx dashed #ffffff40;
	}

	.jian>text {
		font-size: 20rpx;
		color: #D6D6D6;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.collection {
		width: 100%;
		margin: 30rpx 0 0;
	}

	.collection>text {
		font-family: iconfont2;
		font-size: 44rpx;
		color: #ffffff;
		margin-left: 30rpx;
	}

	.collection_nav {
		width: 100%;
		margin-top: 30rpx;
		color: #ffffff80;
		font-size: 28rpx;
	}

	.nav_box {
		width: 80%;
		margin-left: 30rpx;
	}

	.nav_box>text {
		font-size: 32rpx;
		color: #ffffff;
		margin-right: 80rpx;
		/* font-family: iconfont; */
		/* font-weight: 700; */
	}

	.active {
		background: linear-gradient(90deg, #FA2CDC, #1015FD);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.mores {
		margin-right: 24rpx;
	}

	.mores>image {
		width: 32rpx;
		height: 34rpx;
	}


	.NFT {
		position: relative;
		width: 690rpx;
		/* height: 846rpx; */
		background: #3C2F65;
		border: 2rpx solid rgba(130, 121, 227, 0.4);
		margin: 40rpx auto;
		border-radius: 40rpx;
		padding-bottom: 10rpx;
	}

	.NFT>image {
		width: 650rpx;
		height: 650rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
	}

	.NFT>text {
		position: absolute;
		top: 20rpx;
		right: 18rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #221F3A80;
		font-size: 28rpx;
		color: #DFA1ED;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 0 20rpx 0 0;
	}

	.NFT_btm {
		width: 100%;
		/* background: pink; */
		margin-top: 32rpx;
	}

	.NFT_btm_l {
		font-size: 32rpx;
		color: #ffffff;
		margin: 0 20rpx;
	}

	.NFT_btm_l>image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.sign {
		font-size: 22rpx;
		background: #322854;
		border-radius: 10rpx;
		color: #DFA1ED;
		/* padding: 14rpx 0; */
		padding-right: 20rpx;
		margin-right: 10rpx;
	}

	.sign>text {
		margin-left: 6rpx;
	}

	.sign_l {
		color: #ffffff;
		font-size: 22rpx;
		width: 60rpx;
		padding: 4rpx 0 6rpx 0;
		border-radius: 10rpx 0 0 10rpx;
		background: linear-gradient(270deg, rgba(203, 39, 230, 0.8), rgba(18, 22, 253, 0.8));
	}

	.sign>text {
		margin-left: 10rpx;
		padding-bottom: 2rpx;
	}

	.NFT_name {
		width: 100%;
		color: #ffffff;
		font-size: 40rpx;
		margin-top: 10rpx;
	}

	.NFT_name>text:nth-child(1) {
		margin-left: 20rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.NFT_btm_r {
		margin-left: 20rpx;
	}

	.money {
		color: #ffffff;
		font-size: 44rpx;
		font-family: iconfont2;
		margin-right: 32rpx;
	}

	.money>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.commodity_box {
		width: 690rpx;
		margin: 30rpx auto 0;
		position: relative;
	}

	.screen>text {
		width: 82rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		background: #383366;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 8rpx;
	}

	.selsect {
		font-size: 24rpx;
		color: #ffffff;
		width: 170rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 20rpx;
		background: linear-gradient(270deg, #E62AE2 0%, #1216FD 100%);
	}

	.selsect>image {
		width: 24rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}

	.shuaixuan {
		position: absolute;
		top: 48rpx;
		left: 0;
		width: 100%;
		margin-top: 4rpx;
		z-index: 999;
	}

	.shuaixuan>text {
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background: #383366;
		padding-left: 32rpx;
		border-bottom: 1rpx solid #ffffff20;
	}

	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 50rpx;
	}

	.commodity_sell {
		position: relative;
		width: 336rpx;
		/* height: 526rpx; */
		background: #3C2F65;
		border: 2rpx solid rgba(130, 121, 227, 0.4);
		border-radius: 20rpx;
		margin: 12rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 382rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		font-size: 30rpx;
		color: #ffffff;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.hang {
		position: absolute;
		top: 30rpx;
		left: 0;
		background: #00000090;
		border-radius: 0rpx 38rpx 38rpx 0rpx;
		font-size: 22rpx;
		padding: 10rpx 20rpx;
		color: #ffffff;

	}

	.hang>text {
		margin-left: 10rpx;
	}

	.money_a {

		color: #ffffff;
		font-size: 32rpx;
		font-family: iconfont;
	}

	.money_a>image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 6rpx;
	}


	.sign_box {
		margin: 0 10rpx;
	}

	.authentication {
		position: fixed;
		/* #ifdef H5 */
		bottom: var(--window-bottom);
		/* #endif */

		/* #ifdef APP */
		bottom: 0;
		/* #endif */
		left: 50%;
		width: 690rpx;
		height: 70rpx;
		background: #D9C2F3;
		margin: 0 auto;
		border-radius: 10rpx 10rpx 0 0;
		font-size: 24rpx;
		color: #333333;
		padding: 0 10rpx;
		transform: translateX(-50%);
	}

	.tishi>text:nth-child(1) {
		width: 122rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #333333;
		color: #ffffff;
		border-radius: 40rpx;
	}

	.tishi>image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}



	.popup_type {
		display: flex;
		flex-direction: column;
		width: 100%;
		background: #211E38;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		padding-bottom: 50rpx;
	}

	.popup_type>text:nth-child(1) {
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 30rpx;
		margin-top: 50rpx;
	}

	.xuan {
		width: 100%;
		margin: 50rpx 0 30rpx;
	}

	.xuan>text {
		min-width: 134rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 24rpx;
		margin-left: 30rpx;
		border: 1rpx solid #cccccc;
		margin-top: 20rpx;
		padding: 0 10rpx;
	}

	.actives {
		border: 1rpx solid #8020EF !important;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%) !important;
	}

	.submit {
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 40rpx;
		margin: 50rpx auto 0;
	}

	.brand_island_a {
		width: 100%;
		height: 308rpx;
		margin-top: 30rpx;
		margin: 0 auto;
		transform: translateY(-70rpx);
	}

	.swiper_a {
		width: 750rpx;
		height: 300rpx;
	}

	.swiper_box_a {
		position: relative;
		width: 670rpx;
		height: 308rpx;
		text-align: center;
		background: #00000025;
		border-radius: 30rpx;
		margin: 0 20rpx;
	}

	.swiper_box_a>image {
		width: 100%;
		height: 100%;
		z-index: 2;
		border-radius: 30rpx;
	}

	/deep/.u-icon__icon {
		color: #FF2CDF !important;
	}
</style>